<template>
  <el-container style="height: 100vh">
<!--    <div class="_home"></div>-->
    <my-menu :isCollapse="$store.state.app.collapse"></my-menu>
    <el-main class="_home-main">
      <my-header class="_home-page-header">
        <template slot="title">
          <i :class="($store.state.app.collapse?'el-icon-s-unfold':'el-icon-s-fold')" style="color: #909399" @click="showMenu"></i>
<!--          <img src="../../../assets/img/home/logo.png" width="50px" align="center"/>-->
          <div class="_home-breadcrumb">
            <el-breadcrumb separator-class="el-icon-arrow-right" ref="breadcrumb">
              <el-breadcrumb-item v-for="(item,i) in $route.matched" :key="i">{{item.name}}</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </template>
        <template slot="content">
          <my-dropdown :menu="dropdownMenu" v-if="user && avatarUrl">
            <span style="margin: 0 15px" class="_name">{{ user.name }}</span>
            <el-avatar :size="30" class="_avatar" :src="avatarUrl?avatarUrl:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'"></el-avatar>
          </my-dropdown>
        </template>
      </my-header>
      <page-tabs></page-tabs>
      <transition name="move" mode="out-in">
          <router-view>
          </router-view>
      </transition>
    </el-main>
    <transition name="el-zoom-in-center">
      <my-dialog
        v-if="dialogVisible"
        :visible.sync="dialogVisible"
        title="头像上传"
        width="500px"
        destroy-on-close
        @save="saveEntity"
        @close="dialogVisible = false">
        <my-cropper v-model="base64"></my-cropper>
      </my-dialog>
    </transition>
    <transition name="el-zoom-in-center">
      <my-dialog
        v-if="infoVisible"
        :visible.sync="infoVisible"
        title="个人信息"
        width="500px"
        destroy-on-close
        :showFooter="false"
        @close="infoVisible = false">
        <my-edit-form :disabled="true" :formFields="userFields" :data="user"></my-edit-form>
      </my-dialog>
    </transition>
    <transition name="el-zoom-in-center">
      <my-dialog
        v-if="passwordVisible"
        :visible.sync="passwordVisible"
        title="修改密码"
        width="500px"
        destroy-on-close
        @save="editPassword"
        @close="passwordVisible = false">
        <el-form label-position="right" label-width="150px">
          <el-form-item label="请输入旧密码">
            <my-input type="password" v-model="passwordForm.old"></my-input>
          </el-form-item>
          <el-form-item label="请输入新密码">
            <my-input type="password" v-model="passwordForm.new"></my-input>
          </el-form-item>
          <el-form-item label="请再次输入新密码">
            <my-input type="password" v-model="passwordForm.newSec"></my-input>
          </el-form-item>
        </el-form>
      </my-dialog>
    </transition>
  </el-container>
</template>

<script>
  import menu from './sidebar';
  import header from './header';
  import PageTabs from "./page-tabs";
  export default {
    name: "home",
    components:{
      'PageTabs': PageTabs,
      'MyMenu': menu,
      'MyHeader': header
    },
    data(){
      return{
        dialogVisible: false,
        infoVisible: false,
        passwordVisible: false,
        passwordForm: {
          old: '',
          new: '',
          newSec: ''
        },
        base64: '',
        avatarUrl: null,
        user: null,
        userFields: [
          {
            type: 'input',
            label: '姓名',
            prop: 'name',
            rules:{ required: true, message: '姓名不能为空', trigger: 'blur' }
          },
          {
            type: 'input',
            label: '账号',
            prop: 'loginName',
            rules:{ required: true, message: '账号不能为空', trigger: 'blur' }
          },
          {
            type: 'input',
            label: '邮箱',
            prop: 'email'
          },
          {
            type: 'input',
            label: '电话',
            prop: 'phone'
          },
          {
            type: 'date',
            label: '生日',
            prop: 'birthday'
          },
          {
            type: 'select',
            label: '角色',
            prop: 'role',
            url: '/api/sys-config/role/getRoleOption'
          },
          {
            type: 'switch',
            label: '状态',
            prop: 'status',
            dict: 'COMMON_STATUS_DICT'
          },
          {
            type: 'textarea',
            label: '备注',
            prop: 'userDesc'
          }
        ],
        dropdownMenu: [
          {
            name: '个人信息',
            click: ()=>{
              this.infoVisible = true;
            }
          },
          {
            name: '上传头像',
            click: ()=>{
              this.dialogVisible = true;
            }
          },{
            name: '修改密码',
            click: ()=>{
              this.passwordVisible = true;
            }
          },{
            name: '注销登录',
            click: ()=>{
              this.$ls.remove('token');
              this.$ls.remove('user');
              this.$ls.remove('menu');
              this.$router.push('/login');
            }
          }
        ]
      }
    },
    methods:{
      /** 切换菜单显示 **/
      showMenu(){
        this.$ls.set('collapse',!this.$store.state.app.collapse,30 * 60 * 1000)
        this.$store.commit('SET_COLLAPSE',!this.$store.state.app.collapse)
      },
      /** 保存头像 **/
      saveEntity(){
        let param = {
          loginName: this.$ls.get('user'),
          avatar: this.base64
        }
        this.$ajax.saveAvatar(param).then(()=>{
          this.avatarUrl = this.base64;
          this.dialogVisible = false;
        })
      },
      /** 修改密码 **/
      editPassword(){
        if(this.passwordForm.new.length == 0){
          this.$message.warning('密码不能为空')
          return;
        }
        if(this.passwordForm.new != this.passwordForm.newSec){
          this.$message.warning('密码二次验证失败')
          return;
        }
        let param = {
          loginName: this.$ls.get('user'),
          passwordOld: this.passwordForm.old,
          password: this.passwordForm.new
        }
        this.$ajax.editPassword(param).then(res=>{
          this.$message.success('密码修改成功');
        }).catch(err=>{
          this.$message.error(err);
        }).finally(()=>{
          this.passwordVisible = false;
        })
      }
    },
    created(){
      this.$ajax.getUserByLoginName(this.$ls.get('user')).then(res=>{
        this.avatarUrl = res.avatar;
        this.user = res;
      })
    },
    watch:{
      $route(){
        this.setAnimation('breadcrumb','swing-in-left-bck',600)
      }
    }
  }
</script>

<style lang="scss" scoped>
  /*._home{*/
  /*  background: url("../../../assets/img/home/bg.png") no-repeat center;*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  position: fixed;*/
  /*  z-index: 999999;*/
  /*  opacity: 0.1;*/
  /*  pointer-events: none;*/
  /*}*/
  ._home-main{
    /*background-color: #F0F2F5;*/
    overflow: hidden;
    box-sizing: border-box;
    height: 100%;
    padding: 0px 2px 0px 2px;
  }
  ._home-page-header{
    background: #FFFFFF;
    box-sizing: border-box;
    height: 6vh;
    width: calc(100% + 20px);
    line-height: 6vh;
    margin-bottom: 2px;
    padding: 0 30px 0 10px;
    margin-left: -10px;
    border-radius: 0 0 4px 4px;
    i{
      font-size: 4vh;
      line-height: 6vh;
      font-weight: 200;
    }
    ._home-breadcrumb{
      margin-left: 10px;
      display: inline-block;
    }
  }
  ._avatar{
    vertical-align: middle;
    cursor: pointer;
    &:hover{
      border: #409EFF 1px solid;
      box-shadow: #409EFF 0 0 10px;
    }
  }
  ._name{
    cursor: pointer;
    &:hover{
      color: #409EFF;
    }
  }
</style>
